<!-- 论坛详情页 -->
<template>
	<view class="forum-detail">
		<index-forum-display-item>
			<!-- 点赞部分 -->
			<view class="forum-detail__interaction flex">
				<view class="forum-detail__interaction-reply flex-column">
					<image src="/static/images/comment.png" mode="aspectFill" class="forum-detail__interaction-icon"></image>
					<text class="forum-detail__interaction-text">12回复</text>
				</view>
				
				<view class="flex">
					<view class="forum-detail__interaction-like flex-column"
					@tap="toggleLikeIcon"
					>
						<image src="/static/images/like.png" mode="aspectFill" class="forum-detail__interaction-icon" v-show="!likeIconActive"></image>
						<image src="/static/images/like--active.png" mode="aspectFill" class="forum-detail__interaction-icon" v-show="likeIconActive"></image>
						<text class="forum-detail__interaction-text">1.5w</text>
					</view>
					
					<view class="forum-detail__interaction-dislike flex-column"
					@tap="toggleDisLikeIcon"
					>
						<image src="/static/images/dislike.png" mode="aspectFill" class="forum-detail__interaction-icon" v-show="!disLikeIconActive"></image>
						<image src="/static/images/dislike--active.png" mode="aspectFill" class="forum-detail__interaction-icon" v-show="disLikeIconActive"></image>
						<text class="forum-detail__interaction-text">5k</text>
					</view>
				</view>
			</view>
		</index-forum-display-item>
		
		<!-- 评论发表和展示区域 -->
		<view class="forum-detail__comment">
			
			<view class="forum-detail__comment-post flex">
				<image class="forum-detail__comment-post-avatar" src="/static/images/userAvatar.jpg" mode="aspectFill"></image>
				
				<view class="forum-detail__comment-post-content flex">
					<text>评论：</text>
					<input type="text" class="forum-detail__comment-post-input"/>
					<image class="forum-detail__comment-post-img" src="/static/images/messagePostImg.png" mode="aspectFill"></image>
				</view>
			</view>
			
			<view class="forum-detail__comment-items">
<!-- 				<comment-item>
					<template #reply>
						<view class="comment-item__reply" @click="onClickShowPopup">
							<view class="comment-item__reply-item">
								<text class="comment-item__reply-name">棉花糖2304：</text>
								<text>是呀</text>
							</view>
							
							<view class="comment-item__reply-count flex">
								<text>共2条回复</text>
								<image class="comment-item__reply-icon" src="/static/images/rightArrow.png" mode="aspectFill"></image>
							</view>
						</view>
					</template>
				</comment-item>
				<comment-item></comment-item> -->
				<comment-reply 
				v-for="item in commentItems" :key="item.id" :data="item"
				>
				</comment-reply>
			</view>
			
		</view>
		
		<!-- 回复详情 -->
<!-- 		<van-popup :show="showReplyDetails" position="bottom">
			<view class="forum-detail__reply">
				<view class="forum-detail__reply-header flex">
					<text>评论详情</text>
					<image class="forum-detail__reply-cancel" src="/static/images/cancel.png" mode="aspectFill" @click="onClickHidePopup"></image>
				</view>
				
				<view class="forum-detail__reply-content">
					<comment-item></comment-item>
					<comment-item></comment-item>
				</view>
			</view>
		</van-popup> -->
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import indexForumDisplayItem from	'@/components/indexForumDisplayItem/indexForumDisplayItem.vue';
	import commentReply from './commentReply/commentReply.vue'

	const commentItems = ref([
		{
			id:'commentItem1',
			commentItem: {
				id: 'commentItem001',
				name:'憨憨大王',
				avatar: '../../../../static/images/avatar/userAvatar05.jpg',
				date: '30分钟前',
				content: '推荐推荐，之前上课的时候老师人特别好，老师偶尔点名，平时会留点小作业，但是老师给分特别友好，没有基础也可以选，冲！',
				gender: '../../../../static/images/male.png'
			},
			replyItems: [
				{
					id: 'commentItem002',
					name: '棉花糖2304',
					avatar: '../../../../static/images/avatar/userAvatar08.jpg',
					date: '34分钟前',
					content: '冲呀',
					gender: '../../../../static/images/female.png'
				},
				{
					id: 'commentItem003',
					name: '晓晓',
					avatar: '../../../../static/images/avatar/userAvatar09.jpg',
					date: '38分钟前',
					content: '是的，是的，老师人特别好',
					gender: '../../../../static/images/female.png'
				}
			]
		},
		{
			id:'commentItem2',
			commentItem: {
				id: 'commentItem004',
				name:'QuaQzzQuio',
				avatar: '../../../../static/images/avatar/userAvatar06.jpg',
				date: '15:30',
				content: '之前上课，老师根部不管你在下面干什么，只要你按时交作业就可以了，作业也不会很难，只要你做了，老师基本上给分就是ok的，这个就不用担心了。',
				gender: '../../../../static/images/female.png'
			},
			replyItems: [
				{
					id: 'commentItem005',
					name: '青椒炒豆角',
					avatar: '../../../../static/images/avatar/userAvatar07.jpg',
					date: '15:30',
					content: '对',
					gender: '../../../../static/images/female.png'
				}
			]
		},
		{
			id:'commentItem3',
			commentItem: {
				id: 'commentItem006',
				name:'乐多',
				avatar: '../../../../static/images/avatar/userAvatar07.jpg',
				date: '2025-2-16',
				content: '听说老师还挺好的，不要担心，老师给分特别友好',
				gender: '../../../../static/images/female.png'
			}
		}
	])
	// 论坛部分
	// 论坛点赞图标是什么状态：激活还是未激活
	const likeIconActive = ref(false);
	
	const disLikeIconActive = ref(false)
	
	function toggleLikeIcon(){
		if(likeIconActive.value){
			likeIconActive.value = false;
		}else{
			likeIconActive.value = true;
		}
	}
	
	function toggleDisLikeIcon(){
		if(disLikeIconActive.value){
			disLikeIconActive.value = false;
		}else{
			disLikeIconActive.value = true;
		}
	}
	
	const showReplyDetails = ref(false);
	
	function onClickShowPopup(){
		console.log('查看回复详情');
		showReplyDetails.value = true;
	}
	
	function onClickHidePopup(){
		showReplyDetails.value = false;
	}
</script>

<style lang="scss" scoped>
.forum-detail{
	width: 100%;
	height: 100%;
	background-color: #fff;
	
	// 互动部分
	&__interaction{
		width: 654rpx;
		margin: 0 auto;
		justify-content: space-between;
		// margin-bottom: 14rpx;
		// border-bottom: 2rpx solid #d7d7d7;
		&-like{
			margin-right: 15rpx;
			// justify-content: center;
			align-items: center;
		}
		
		&-dislike{
			margin-right: 15rpx;
			align-items: center;
		}
		
		&-reply{
			margin-right: 9rpx;
			align-items: center;
		}
		
		&-icon{
			width: 30rpx;
			height: 30rpx;
		}
		
		&-text{
			font-size: 18rpx;
			color: #797979;
		}
	}
	
	// 评论发表和展示区域
	&__comment{
		width: 690rpx;
		margin: 0 auto;
		box-sizing: border-box;
		padding: 0 24rpx;
		border-top: 2rpx solid #d7d7d7;
		
		&-post{
			width: 100%;
			margin-top: 30rpx;
			margin-bottom: 37rpx;
			&-avatar{
				width: 45rpx;
				height: 45rpx;
				margin-right: 23rpx;
			}
			&-content{
				width: 586rpx;
				background-color: #f2f2f2;
				font-size: 24rpx;
				color: #797979;
				box-sizing: border-box;
				padding-left: 10rpx;
			}
			
			&-input{
				flex: 1;
			}
			
			&-img{
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}
		}
	}
	
	&__reply{
		// width: ;
		&-header{
			width: 690rpx;
			box-sizing: border-box;
			padding: 20rpx;
			// padding-bottom: 18rpx;
			border-bottom: 2rpx solid #d7d7d7;
			justify-content: space-between;
			margin: 0 auto;
		}
		&-cancel{
			width: 30rpx;
			height: 30rpx;
		}
		
		&-content{
			width: 690rpx;
			margin: 0 auto;
		}
		
		&-item{
			// border-bottom: 10rpx solid #d7d7d7 !important;
			// background-color: red !important;
		}
	}
}

.comment-item{
	&__reply{
		width: 586rpx;
		box-sizing: border-box;
		padding: 12rpx 0;
		padding-left: 18rpx;
		margin-left: 68rpx;
		background-color: #f2f2f2;
		border-radius: 5rpx;
		&-item{
			font-size: 24rpx;
			color: #333333;
			margin-bottom: 12rpx;
		}
		
		&-name{
			color: #608ec5;
		}
		
		&-count{
			font-size: 18rpx;
			color: #797979;
		}
		
		&-icon{
			width: 12rpx;
			height: 12rpx;
		}
	}
}
</style>
